<template>
    <div class="tablemapData" ref="tablemapdata">

    </div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts';
import CenxiJson from '@/assets/json/Cenxi.json'
import { onMounted, ref } from 'vue';

const tablemapdata = ref(null)

onMounted(() => {
    var myChart = echarts.init(tablemapdata.value);
    echarts.registerMap('cenxi', CenxiJson);
    const option = {
        series: [
            {
                name: 'cenxi',
                type: 'map',
                map: 'cenxi',
                itemStyle:{
                    areaColor: '#033178',
                        borderColor: '#fff',
                        emphasis: {
                            areaColor: '#304798'
                        }
                }
            }]
    }
    myChart.setOption(option)
})
</script>

<style scoped lang="scss">
.tablemapData {
    width: 100%;
    height: 100%;
}
</style>
